<template>
  <div class="report">
    <ul class="left_list">
      <li v-for="(item, index) in menus" :key="item.fun">
        <h3 class="min_title">
          {{ $t('report.' + item.name) }}
        </h3>
        <p
          v-for="(itenChild, index1) in item.children"
          @click="showTemp(itenChild, index, index1)"
          :class="{ active: itenChild.fun === active }"
          :title="itenChild.thirdApp ? itenChild.name : $t('report.' + itenChild.name)"
          :key="itenChild.fun"
        >
          {{ itenChild.thirdApp ? itenChild.name : $t('report.' + itenChild.name) }}
        </p>
      </li>
    </ul>
    <div class="right_detail">
      <!-- 右侧上面导航 -->
      <ul class="top_nav clearfix" v-if="topObj.length !== 0" v-show="!$route.query.isExport">
        <li
          @click="bbb(item)"
          :class="{ active_child: item.fun === active_child }"
          :key="item.name"
          v-for="item in topObj"
        >
          {{ $t('report.' + item.name) }}
        </li>
      </ul>
      <div class="page" v-if="thirdApp">
        <iframe
          v-for="(page, index) in urlArr"
          v-show="active === page._id"
          :src="newUrl(page.url)"
          :key="index"
        ></iframe>
      </div>
      <div v-else>
        <div class="wrapper" v-show="!$route.query.isExport">
          <el-input
            type="textarea"
            placeholder="1.请把超时的数据粘贴到这里  2.点击查询  3.点击导出excel或者是导出pdf"
            v-model="$store.state.report.customExportData"
            v-if="$store.state.session.user.type === 'admin'"
          ></el-input>
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </div>
        <div class="wrapper_export">
          <router-view name="exportTask"></router-view>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { isHasMenu } from '@/utils/m7Utils.js'
import { addZhuGeTrack } from '@/utils/addZhuGeTrack.js'
export default {
  name: 'report',
  data() {
    return {
      isEcommerce: this.$store.getters.isEcommerce ? true : false,
      index: 0,
      index1: 0,
      thirdApp: false,
      thirdAppUrl: '',
      active_child: '',
      topObj: [],
      active: '',
      urlArr: [],
      token: {},
      activeName: '',
      activeNameChild: '',
      submenuIndex: '',
      currentRoute: '',
      activeIndex: {
        call_report: '',
        im_report: '',
        mail_report: '',
        customer_report: '',
        business_report: '',
        ques_report: '',
        robot_report: ''
      },
      subMenu: [],
      menus: [
        {
          fun: 'im_report',
          name: 'imReport',
          funTree: true,
          children: [
            {
              name: 'totalTalkReport',
              fun: '会话报表',
              classify: 'im_report',
              children: [
                { name: 'imReportBusinessAnalyse', funTree: true, fun: 'im_report_bus', classify: 'im_report' },
                { name: 'imReportSessionTime', funTree: true, fun: 'im_report_session_time', classify: 'im_report' },
                { name: 'imReportMessage', funTree: true, fun: 'im_report_msg', classify: 'im_report' },
                { name: 'imReportCsrChannel', funTree: true, fun: 'im_report_channel_csr', classify: 'im_report' }
              ]
            },
            {
              name: 'totalAgentReport',
              fun: '在线在线座席报表',
              classify: 'im_report',
              children: [
                { name: 'imReportAgent', funTree: true, fun: 'im_report_agent', classify: 'im_report' },
                { name: 'imReportCsr', funTree: true, fun: 'im_report_agent_csr', classify: 'im_report' },
                { name: 'imReportAgentResponse', funTree: true, fun: 'im_report_agent_response', classify: 'im_report' }
              ]
            },
            {
              name: 'imTotalQueueReport',
              fun: '在线技能组报表',
              classify: 'im_report',
              children: [
                { name: 'imReportWorkLoad', funTree: true, fun: 'im_topeer_workload_report', classify: 'im_report' },
                { name: 'imReportWorkQuality', funTree: true, fun: 'im_topeer_quality_report', classify: 'im_report' },
                { name: 'imReportLineUp', funTree: true, fun: 'im_topeer_wait_report', classify: 'im_report' }
              ]
            }
          ]
        }
      ]
    }
  },
  computed: {
    ur() {
      return this.$store.state.session.user
    }
  },
  methods: {
    // 初始渲染展示
    bbb(obj) {
      let aa = ''
      this.active_child = obj.fun
      aa = `/index/report/${obj.classify}/${obj.fun}`
      this.menus[this.index].children[this.index1].childIndex = obj.fun
      this.$router.push({ path: aa })
    },
    showTemp(obj, num, num1) {
      addZhuGeTrack(this.$route.path)
      this.active = obj.fun
      if (obj.thirdApp) {
        this.thirdApp = true
        this.topObj = []
      } else {
        this.thirdApp = false
        this.index1 = num1
        this.index = num
        this.topObj = obj.children
        this.active = obj.fun
        if (!obj.childIndex) {
          obj.childIndex = obj.children[0].fun
          this.bbb(obj.children[0])
        } else {
          this.active_child = obj.childIndex
          this.$router.push({ path: `/index/report/${obj.classify}/${obj.childIndex}` })
        }
      }
    },
    newUrl(url) {
      let newUrl =
        url.indexOf('?') !== -1
          ? url + '&loginName=' + this.ur.displayName + '&loginExten=' + this.ur.exten
          : url + '?loginName=' + this.ur.displayName + '&loginExten=' + this.ur.exten
      newUrl += '&accountId=' + this.$store.state.session.account.account
      if (newUrl.indexOf('power.7moor.com') > -1 || newUrl.indexOf('power-') > -1) {
        if (this.$store.state.session.sessionId && window.sessionStorage.getItem('loginToken')) {
          newUrl +=
            '&sessionId=' +
            this.$store.state.session.sessionId +
            '&loginToken=' +
            window.sessionStorage.getItem('loginToken') +
            '&hiddenHeader=true&isSocket=false'
        }
      }
      if (this.$store.state.session.account.tokenCheck) {
        newUrl += '&token=' + this.token.token + '&tokenId=' + this.token.tokenId
      }
      return newUrl
    },
    filterMenu() {
      if (
        isHasMenu('func_forbid_config_header_report', this.$store.state.session.user) &&
        this.$store.state.session.user.type !== 'admin' &&
        this.$store.state.session.user.exten !== '0000'
      ) {
        let data = {
          configBool: true
        }
        this.$store.dispatch('setConfigHeaderBool', data)
      }
      this.menus = this.menus.filter((item) => {
        // 第一层
        if (item.funTree) {
          if (!isHasMenu(item.fun, this.$store.state.session.user)) {
            return false
          } else {
            // 第二层
            item.children = item.children.filter((subItem) => {
              let bool = false
              // 第三层
              subItem.children = subItem.children.filter((subItemChild) => {
                if (subItemChild.funTree) {
                  if (!isHasMenu(subItemChild.fun, this.$store.state.session.user)) {
                    return false
                  } else {
                    bool = true
                    return true
                  }
                } else {
                  bool = true
                  return true
                }
              })
              return bool
            })
            return true
          }
        } else {
          item.children = item.children.filter((subItem) => {
            if (subItem.funTree) {
              if (subItem.name === 'remoteControl') {
                // 远程控制报表是否显示
                let exten_visible = this.$store.state.session.account.exten_visible || []
                return (
                  this.$store.state.session.user.type === 'admin' ||
                  exten_visible.includes(this.$store.state.session.sessionId)
                )
              }
              if (!isHasMenu(subItem.fun, this.$store.state.session.user)) {
                return false
              } else {
                subItem.children = subItem.children.filter((subItemChild) => {
                  if (subItemChild.funTree) {
                    if (!isHasMenu(subItemChild.fun, this.$store.state.session.user)) {
                      return false
                    } else {
                      return true
                    }
                  } else {
                    return true
                  }
                })
              }
            } else {
              return true
            }
            return true
          })
          return true
        }
      })
    },
    handleClick(tab, event) {
      this.activeName = tab.name
      if (this.activeIndex[tab.name]) {
        this.$router.push({ path: '/index/report/' + tab.name + '/' + this.activeIndex[tab.name] })
        this.activeNameChild = this.activeIndex[tab.name]
      } else {
        for (let i = 0; i < this.menus.length; i++) {
          let item = this.menus[i]
          if (item.fun === tab.name) {
            this.$router.push({ path: '/index/report/' + tab.name + '/' + item.children[0].fun })
            this.activeIndex[tab.name] = item.children[0].fun
            this.activeNameChild = item.children[0].fun
          }
        }
      }
    },
    childHandleClick(tab) {
      this.activeNameChild = tab.name
      this.activeIndex[this.activeName] = tab.name
      this.$router.push({ path: '/index/report/' + this.activeName + '/' + tab.name })
    },
    subMenuChange(index) {
      var arr = index.split('/')
      this.activeIndex[arr[3]] = arr[4]
    }
  },
  beforeMount() {
    if (!this.isEcommerce) {
      this.menus = [
        {
          fun: 'call_report',
          name: 'callReport',
          funTree: true,
          children: [
            {
              name: 'totalCallinReport',
              fun: '呼入报表',
              classify: 'call_report',
              children: [
                { name: 'callInReport', funTree: true, fun: 'callin_report', classify: 'call_report' },
                { name: 'callReportRelayArea', funTree: true, fun: 'call_report_relay_area', classify: 'call_report' }
              ]
            },
            {
              name: 'totalCalloutReport',
              fun: '呼出报表',
              classify: 'call_report',
              children: [
                { name: 'calloutReport', funTree: true, fun: 'callout_report', classify: 'call_report' },
                {
                  name: 'callReportDialoutArea',
                  funTree: true,
                  fun: 'call_report_dialout_area',
                  classify: 'call_report'
                }
              ]
            },
            {
              name: 'totalQueueReport',
              fun: '技能组报表',
              classify: 'call_report',
              children: [
                { name: 'queueReport', funTree: true, fun: 'queue_report', classify: 'call_report' },
                { name: 'callReportQueueTime', funTree: true, fun: 'call_report_queue_time', classify: 'call_report' }
              ]
            },
            {
              name: 'totalAgentReport',
              fun: '座席报表',
              classify: 'call_report',
              children: [
                { name: 'callReportAgent', funTree: true, fun: 'call_report_agent', classify: 'call_report' },
                {
                  name: 'callReportApproveSurvey',
                  funTree: true,
                  fun: 'call_report_approve_survey',
                  classify: 'call_report'
                }
              ]
            },
            {
              name: 'totalCallAlnalyse',
              fun: '业务分析报表',
              classify: 'call_report',
              children: [
                { name: 'callReportBusinessAlnalyse', funTree: true, fun: 'call_label_report', classify: 'call_report' }
              ]
            }
          ]
        },
        {
          fun: 'im_report',
          name: 'imReport',
          funTree: true,
          children: [
            {
              name: 'totalTalkReport',
              fun: '会话报表',
              classify: 'im_report',
              children: [
                { name: 'imReportBusinessAnalyse', funTree: true, fun: 'im_report_bus', classify: 'im_report' },
                { name: 'imReportSessionTime', funTree: true, fun: 'im_report_session_time', classify: 'im_report' },
                { name: 'imReportMessage', funTree: true, fun: 'im_report_msg', classify: 'im_report' },
                { name: 'imReportCsrChannel', funTree: true, fun: 'im_report_channel_csr', classify: 'im_report' }
              ]
            },
            {
              name: 'totalVisitedReport',
              fun: '访客相关报表',
              classify: 'im_report',
              children: [
                // {name: 'imReportFlow', fun: 'im_report_flow', funTree: true, classify: 'im_report'},
                { name: 'imReportKeyWords', fun: 'im_report_key_words', funTree: true, classify: 'im_report' },
                { name: 'imReportLoyalty', fun: 'im_report_loyalty', funTree: true, classify: 'im_report' },
                { name: 'imReportAnAlysisAll', fun: 'im_report_anAlysis_All', funTree: true, classify: 'im_report' },
                { name: 'imReportVisitorHeatmap', funTree: true, fun: 'im_report_uba_heatmap', classify: 'im_report' },
                { name: 'imReportSourceFrom', funTree: true, fun: 'im_report_source', classify: 'im_report' },
                { name: 'imReportTrafficReports', fun: 'im_report_flow', funTree: true, classify: 'im_report' }
              ]
            },
            {
              name: 'totalAgentReport',
              fun: '在线在线座席报表',
              classify: 'im_report',
              children: [
                { name: 'imReportAgent', funTree: true, fun: 'im_report_agent', classify: 'im_report' },
                { name: 'imReportCsr', funTree: true, fun: 'im_report_agent_csr', classify: 'im_report' },
                { name: 'imReportAgentResponse', funTree: true, fun: 'im_report_agent_response', classify: 'im_report' }
              ]
            },
            {
              name: 'imTotalQueueReport',
              fun: '在线技能组报表',
              classify: 'im_report',
              children: [
                { name: 'imReportWorkLoad', funTree: true, fun: 'im_topeer_workload_report', classify: 'im_report' },
                { name: 'imReportWorkQuality', funTree: true, fun: 'im_topeer_quality_report', classify: 'im_report' },
                { name: 'imReportLineUp', funTree: true, fun: 'im_topeer_wait_report', classify: 'im_report' }
              ]
            }
          ]
        },
        {
          fun: 'total_other',
          name: 'totalOther',
          children: [
            {
              fun: 'mail_report',
              name: 'mailReport',
              classify: 'mail_report',
              funTree: true,
              children: [
                { name: 'mailReportAgent', fun: 'mail_report_agent', funTree: true, classify: 'mail_report' },
                { name: 'mailReportCategory', fun: 'mail_report_category', funTree: true, classify: 'mail_report' },
                { name: 'mailReportAgentCsr', funTree: true, fun: 'mail_report_agent_csr', classify: 'mail_report' }
              ]
            },
            {
              fun: 'customer_report',
              name: 'customerReport',
              classify: 'customer_report',
              funTree: true,
              children: [
                {
                  name: 'customerReportIncrease',
                  funTree: true,
                  fun: 'customer_report_increase',
                  classify: 'customer_report'
                }
              ]
            },
            {
              fun: 'business_report',
              name: 'businessReport',
              classify: 'business_report',
              funTree: true,
              children: [
                {
                  name: 'businessReportAnalyse',
                  funTree: true,
                  fun: 'business_report_analyse',
                  classify: 'business_report'
                },
                {
                  name: 'businessReportAgent',
                  funTree: true,
                  fun: 'business_report_agent',
                  classify: 'business_report'
                },
                {
                  name: 'businessReportSatisfaction',
                  funTree: true,
                  fun: 'business_report_appraise',
                  classify: 'business_report'
                }
              ]
            },
            {
              fun: 'ques_report',
              name: 'quesReport',
              classify: 'ques_report',
              funTree: true,
              children: [
                {
                  name: 'questionnaireReportReturn',
                  funTree: true,
                  fun: 'ques_report_result',
                  classify: 'ques_report'
                },
                {
                  name: 'questionnaireReportQuestionDetail',
                  funTree: true,
                  fun: 'ques_report_answer',
                  classify: 'ques_report'
                }
              ]
            },
            {
              fun: 'robot_report',
              name: 'robotReport',
              classify: 'robot_report',
              funTree: true,
              children: [
                { name: 'robotReportMessage', funTree: true, fun: 'robot_report_message', classify: 'robot_report' },
                { name: 'robotReportTop20', funTree: true, fun: 'robot_report_top20', classify: 'robot_report' }
              ]
            },
            {
              fun: 'autoqc_report',
              name: 'qualityReport',
              classify: 'quality_report',
              funTree: true,
              children: [
                { name: 'qualityRulrUse', funTree: true, fun: 'rule_used_report', classify: 'quality_report' },
                { name: 'qualityReportAgent', funTree: true, fun: 'qc_agent_work_report', classify: 'quality_report' },
                {
                  name: 'qualityReportResult',
                  funTree: true,
                  fun: 'agent_qc_result_report',
                  classify: 'quality_report'
                }
              ]
            },
            {
              fun: 'remote_control_report',
              name: 'remoteControl',
              classify: 'remote_control_report',
              funTree: true,
              children: [
                {
                  name: 'remoteControlAgent',
                  funTree: false,
                  fun: 'remote_control_agent',
                  classify: 'remote_control_report'
                },
                {
                  name: 'remoteControlService',
                  funTree: false,
                  fun: 'remote_control_service',
                  classify: 'remote_control_report'
                }
              ]
            }
          ]
        }
      ]
    }
    this.$store.dispatch('getApplications', { category: 'report' }).then((res) => {
      this.urlArr = res.data
      if (this.urlArr.length > 0) {
        this.urlArr.forEach((item) => {
          item.url = item.url.replace('http://', '//')
          this.menus[this.menus.length - 1].children.push({
            fun: item._id,
            name: item.name,
            thirdApp: true,
            url: item.url
          })
        })
      }
      if (this.$store.state.session.account.tokenCheck && this.urlArr.length > 0) {
        this.$store.dispatch('getToken').then((token) => {
          this.token = token
        })
      }
      this.filterMenu()
      this.showTemp(this.menus[0].children[0], 0, 0)
    })
    // if (this.menus.length !== 0) {
    //   if (this.$route.path.split('/').length !== 5) {
    //     this.handleClick({name: this.menus[0].fun})
    //   } else {
    //     this.activeName = this.$route.path.split('/')[3]
    //     this.subMenuChange(this.$route.path)
    //   }
    // }
    // this.activeName = this.$route.path.split('/')[3] ? this.$route.path.split('/')[3] : 'call_report'
    // for (let key in this.menus[this.activeName].children) {
    //   this.menus[this.activeName].children[key].link = '/index/report/' + this.activeName + '/' + key
    // }
    // this.subMenu = this.menus[this.activeName].children
  },
  watch: {
    // '$route' (to, from) {
    //   if (to.meta.title === 'report' && this.activeName !== to.fullPath.split('/')[3]) {
    //     this.activeName = to.fullPath.split('/')[3]
    //   }
    //   if (to.meta.title === 'report' && this.activeNameChild !== to.fullPath.split('/')[4]) {
    //     this.activeNameChild = to.fullPath.split('/')[4]
    //   }
    // }
  },
  beforeRouteLeave(to, from, next) {
    this.currentRoute = from.fullPath
    next()
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (to.query.active) {
      } else if (vm.currentRoute) {
        vm.$router.push({ path: vm.currentRoute })
      }
    })
  }
  // activated () {
  //   if (this.menus.length !== 0) {
  //     if (this.$route.path.split('/').length !== 5) {
  //       this.activeName = this.menus[0].fun
  //       this.$router.push({path: '/index/report/' + this.menus[0].fun + '/' + this.menus[0].children[0].fun})
  //     }
  //   }
  // }
}
</script>
<style lang="stylus" scoped>
@import "../../../assets/common.styl"
.report
  height calc(100vh - 53px)
  background $cf-white
  display flex
  .page
    height calc(100vh - 54px)
    height -webkit-calc(100vh - 54px)
    height -moz-calc(100vh - 54px)
    overflow hidden
    position relative
    background $cf-white
    iframe
      position absolute
      width 100%
      height 100%
      border none
      overflow auto
      display block
  .left_list
    width 150px
    height 100%
    background #f0f2f3
    box-shadow 0px 0px 6px rgba(0,0,0,0.1)
    border-right 1px solid #e0e0e0
    overflow hidden
    overflow-y auto
    li
      margin-top 20px
      h3
        width 130px
        padding-left 20px
        color #000
        font-weight bold
        line-height 30px
      p
        width 130px
        line-height 30px
        padding-left 20px
        font-size 14px
        color #424242
        cursor pointer
        overflow hidden
        text-overflow ellipsis
        white-space nowrap
        &:hover
          background #e1e3e5
          color #000
      .active
        background #dcdee0
        color #459ae9
  .right_detail
    width: 600px
    flex 1
    .top_nav
      height 46px
      padding 0 10px
      border-bottom 1px solid #e0e0e0
      line-height 46px
      li
        height 26px
        font-size 14px
        line-height 26px
        padding 0 10px
        display inline-block
        margin 10px 0 0 10px
        cursor pointer
      .active_child
        background $c-main
        color $cf-white
        border-radius 14px
  .active
    color #f00
  .wrapper
    height calc(100vh - 99px)
    overflow scroll
    overflow-x hidden
    padding-bottom 20px
  .wrapper_export
    height calc(100vh - 52px)
    overflow scroll
    overflow-x hidden
    padding-bottom 20px
</style>
